<!DOCTYPE html>
<html>
<head>

        <meta charset="utf-8" />

        <title>倒计时</title>

        <link href="/lib/bootstrap.min.css" rel="stylesheet">

	<style>
		body {
			padding:40px;
            text-align: center;
		}
		#console {
			height: 400px;
			overflow: auto;
		}
		.username-msg {color:orange;}
		.connect-msg {color:green;}
		.disconnect-msg {color:red;}
		.send-msg {color:#888}
	</style>


	<script src="/lib/socket.io.js"></script>
    <script src="/lib/moment.min.js"></script>
    <script src="/lib/jquery-2.1.4.min.js"></script>
    <script src="/js/app.js"></script>

	<script>

		var socket =  io.connect(ServerUrl);

		var mosaicFinish = true;
		var playFinish = true;
        var cdinterval;

		socket.on('connect', function() {
			console.log("Client has connected to the server!");
		});

		socket.on('mosaic', function(data) {
            mosaicFinish = true;
            countdown();
		});

        socket.on('play-finish', function(data) {
            playFinish = true;
            countdown();
        });

        socket.on('face', function(data) {

            var faces = data.result.faces;

            if(faces.length == 0){
                mosaicFinish = true;
                playFinish = true;
                countdown();
            }
        });



		socket.on('disconnect', function() {
            console.log("The client has disconnected!");
		});

        function sendDisconnect() {
            socket.disconnect();
        }

		function sendMessage() {


            var jsonObject = {};
            socket.emit('chatevent', jsonObject);
		}

        function faceDetect(){

            var jsonObject = {};

            socket.emit('face', jsonObject);

        }

        function countdown(){

            if(mosaicFinish == false || playFinish == false){
                return;
            }

            var countdown = 3;
            clearInterval(cdinterval);
            cdinterval = setInterval(function(){

                $('#textCountdown').show();
                $('#textCountdown').text(countdown.toString());
                countdown -= 1;

                if(countdown < 0){
                    $('#textCountdown').text("你好吗www");
                    clearInterval(cdinterval);
                    mosaicFinish = false;
                    playFinish = false;
                    faceDetect();
                }

            },1000)
        }


        countdown();


	</script>
</head>

<body>

<div id="overlayCountdown" class="container"   >

    <div class="row" >
        <div class="col-xs-12">
            <div id="textCountdown" style="font-size:150pt;" hidden></div>
        </div>
    </div>
</div>

</body>

</html>
